<script setup lang="ts">
import type { ColumnProps } from '@/components/ProTable/types'
import { render, useTemplateRef } from 'vue'
import ProTable from '@/components/ProTable/index.vue'

const tableData = [
  {
    name: '张三',
    age: 25,
    sex: '男',
    address: '北京市朝阳区XX路100号',
  },
  {
    name: '李翠翠',
    age: 24,
    sex: '女',
    address: '上海市浦东新区YY路200号',
  },
  {
    name: '王五',
    age: 28,
    sex: '男',
    address: '广州市天河区ZZ路300号',
  },
]

/* 普通使用 */
const proTable1 = {
  data: tableData,
  columns: [
    {
      label: '序号',
      type: 'index',
      width: 55,
    },
    {
      label: '姓名',
      prop: 'name',
      // width: 120,
    },
    {
      label: '年龄',
      prop: 'age',
      // width: 80,
    },
    {
      label: '性别',
      prop: 'sex',
      // width: 80,
    },
    {
      label: '地址',
      prop: 'address',
      minWidth: 200,
    },
  ],
}

/**
 * 自定义列模板+render写法
 */
const proTable2 = {
  border: true,
  data: tableData,
  columns: [
    {
      label: '序号',
      type: 'index',
      width: 55,
    },
    {
      label: '姓名',
      prop: 'name',
      // width: 120,
    },
    {
      label: '年龄',
      prop: 'age',
      // width: 80,
    },
    {
      label: '性别',
      prop: 'sex',
      render(h, { row }) {
        return h(ElTag, { type: row.sex === '男' ? 'primary' : 'success' }, () => row.sex)
      },
    },
    {
      label: '地址',
      prop: 'address',
      minWidth: 200,
    },
    {
      label: '操作',
      prop: 'actions',
      align: 'center',
      width: 120,
      slot: 'actions',
    },
  ] as ColumnProps[],
}

/**
 * 多级表头
 */
const proTable3 = {
  data: tableData,
  columns: [
    {
      label: '基本信息',
      children: [
        {
          label: '姓名',
          prop: 'name',
        },
        {
          label: '年龄',
          prop: 'age',
        },
        {
          label: '性别',
          prop: 'sex',
        },
      ],
    },
    {
      label: '地址信息',
      children: [
        {
          label: '地址',
          prop: 'address',
        },
      ],
    },
  ],
}

/**
 * 展开行
 */
const proTable4 = {
  data: tableData,
  height: 400,
  columns: [
    {
      label: '',
      prop: 'name',
      type: 'expand',
      slot: 'expand',
    },
    {
      label: '年龄',
      prop: 'age',
      // width: 80,
    },
    {
      label: '性别',
      prop: 'sex',
      // width: 80,
    },
    {
      label: '地址',
      prop: 'address',
      minWidth: 200,
    },
  ] as ColumnProps[],
}
</script>

<template>
  <div>
    <el-collapse>
      <el-collapse-item title="普通使用" name="1">
        <ProTable :data="proTable1.data" :columns="proTable1.columns" border />
      </el-collapse-item>
      <el-collapse-item title="自定义列模板 + render写法" name="2">
        <ProTable v-bind="proTable2">
          <template #actions="{ row, column, $index }">
            <el-button link type="primary" size="small" @click="console.log('编辑', row, column, $index)">
              编辑
            </el-button>
            <el-button link type="danger" size="small" @click="console.log('删除', row, column, $index)">
              删除
            </el-button>
          </template>
        </ProTable>
      </el-collapse-item>
      <el-collapse-item title="多级表头" name="3">
        <ProTable v-bind="proTable3" />
      </el-collapse-item>
      <el-collapse-item name="4" title="展开行">
        <ProTable v-bind="proTable4">
          <template #empty>
            暂无数据
          </template>
          <template #append>
            append插槽内容
          </template>
          <template #expand="{ row }">
            <div style="margin: 10px;">
              <p><strong>姓名：</strong>{{ row.name }}</p>
              <p><strong>年龄：</strong>{{ row.age }}</p>
              <p><strong>性别：</strong>{{ row.sex }}</p>
            </div>
          </template>
        </ProTable>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped>

</style>
